<template>
	<gracePage statusBarBG="#EB5D4B" :customHeader="false">
		<view slot="gBody">
			<view class="grace-padding">
				<view class="grace-shoppingcard">
					<view class="grace-shoppingcard-goods">
						<image :src="gRequest.apiUrlImages + goodsData.image" class="grace-shoppingcard-goods-image" mode="aspectFill"></image>
						<view class="grace-shoppingcard-goods-body">
							<view class="grace-shoppingcard-goods-title">{{ goodsData.name }}</view>
							<view class="grace-space-between grace-flex-vcenter">
								<text class="grace-shoppingcard-goods-price">￥{{ goodsData.price }}</text>
							</view>
						</view>
					</view>
				</view>
				<uni-rate :value="star" margin="5" @change="starchange" active-color="#E76B61" size="24"></uni-rate>
				<view class="grace-space-between grace-margin-top grace-flex-vcenter">
					<view class="grace-bold grace-h4">填写评价</view>
					<text class="release-button" @tap="submit">{{ subtxt }}</text>
				</view>
				<view class="release-content">
					<view>
						<textarea name="content" placeholder="亲，您对这个商品满意吗？您的评价会帮助我们选择更好的商品哦~" class="release-content-input" value="" v-model="textareaVal" />
					</view>
				</view>
				<!-- 图片选择  -->
				<view class="grace-title grace-margin-top">
					<text class="grace-title-text grace-black">上传图片</text>
					<text class="grace-text-small grace-gray grace-icons icon-remove" @tap="clearAllImgs">清空图片</text>
				</view>
				<view style="margin-top:5rpx;">
					<graceSelectImgAndUpload
						:maxFileNumber="9"
						ref="selectimgandupload"
						@removeImg="removeImg"
						@uploaded="imgLoaded"
						@change="imgsChange"
						:formData={evaluate_id:evaluate_id}
						fileName="file2"
						@uploaderror="uploaderror"
						:uploadServerUrl="gRequest.apiUrl+'/evaluates/upimages'"
					></graceSelectImgAndUpload>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceStar from '../../graceUI/components/graceStar.vue';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import graceSelectImgAndUpload from '../../graceUI/components/graceSelectImgAndUpload.vue';
export default {
	data() {
		return {
			goodsData: {},
			queryData: {},
			star: 0,
			textareaVal: '',
			selectedimgs: [],
			// 上传按钮名称
			subtxt: '发布',
			evaluate_id:""
		};
	},
	onReady: function() {},
	onLoad: function(option) {
		this.queryData = option;
		this.getData();
	},
	methods: {
		getData: function() {
			this.gRequest.get(
				'/product/productinfo',
				{
					product_id: this.queryData.product_id
				},
				res => {
					this.goodsData = res.data;
				}
			);
		},
		starchange: function(e) {
			this.star = Number(e.value);
		},
		// 选择图片时引起的数据变化
		imgsChange: function(imgs) {
			this.selectedimgs = imgs;
		},
		// 提交动态
		submit: function() {
			if (this.selectedimgs.length < 1) {
				uni.showToast({ title: '请选择图片', icon: 'none' });
				return;
			}
			this.gRequest.post(
				'/evaluates/evaluatepost',
				{
					product_id: this.queryData.product_id,
					member_id:JSON.parse(uni.getStorageSync('userInfo')).member_id,
					star:this.star,
					msg:this.textareaVal,
				},"form",{},
				res => {
					this.evaluate_id = res.evaluate_id
					this.$refs.selectimgandupload.upload();
				}
			);
		},
		imgLoaded: function(res) {
			uni.showToast({
				title:"提交成功",
				icon:"none"
			})
			uni.navigateBack({})
		},
		uploaderror: function() {
			console.log('上传过程遇到错误');
		},
		// 清空图片
		clearAllImgs: function() {
			this.selectedimgs = [];
			this.$refs.selectimgandupload.clearAllImgs();
		},
		removeImg: function(e) {
			console.log('被删除的图片信息');
			console.log(e);
		}
	},
	components: { gracePage, graceStar, uniRate, graceSelectImgAndUpload }
};
</script>
<style lang="scss">
.release-content {
	margin-top: 40rpx;
	background-color: #f7f7f7;
	border-radius: 10rpx;
}
.release-button {
	background: #3688ff;
	height: 50rpx;
	padding: 0 25rpx;
	line-height: 50rpx;
	border-radius: 50rpx;
	color: #ffffff;
	font-size: 22rpx;
}
.release-content-input {
	height: 180rpx;
	font-size: 28rpx;
	width: 650;
	color: #8e8080;
	padding: 25rpx;
	line-height: 46rpx;
}
.grace-stars-items {
	margin-right: 20rpx !important;
}
.order-status {
	height: 160rpx;
	background-color: #eb5d4b;
	width: 100%;
	text {
		&:nth-child(1) {
			margin-left: 80rpx;
			font-size: 30rpx;
			color: #ffffff;
		}
		&:nth-child(2) {
			margin-right: 80rpx;
			font-size: 80rpx;
			color: #ffffff;
		}
	}
}
.addressInfo {
	height: 80rpx;
	width: 100%;
	text {
		&:nth-child(1) {
			margin-left: 30rpx;
			font-size: 48rpx;
			color: rgb(235, 93, 75);
		}
		&:nth-child(2) {
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #666666;
		}
	}
}
.other-info {
	margin-bottom: 20rpx;
	font-size: 28rpx;
	text {
		&:nth-child(1) {
			margin-left: 30rpx;
			color: #999999;
		}
		&:nth-child(2) {
			margin-right: 30rpx;
			color: #333333;
		}
	}
}
.grace-shoppingcard {
	background: #ffffff;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.grace-shopp-name {
	width: 500rpx;
}
.grace-shopp-go {
	width: 120rpx;
}
.grace-shoppingcard-goods {
	margin: 10rpx 0;
	display: flex;
	flex-wrap: nowrap;
}
.grace-shoppingcard-goods-checkbtn {
	width: 60rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-image {
	width: 150rpx;
	height: 150rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-body {
	width: 100%;
}
.grace-shoppingcard-goods-title {
	line-height: 1.4em;
}
.grace-shoppingcard-goods-price {
	color: #eb5d4b;
	font-size: 32rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.grace-shoppingcard-goods-number {
	margin-right: 30rpx;
	color: #eb5d4b;
	font-size: 30rpx;
}
.grace-shoppingcard-remove {
	display: block;
	text-align: right;
	line-height: 50rpx;
	margin-top: 30rpx;
	color: #cccccc;
	font-size: 24rpx;
}
.grace-shoppingcard-checkbtn {
	width: 200rpx;
	margin-left: 50rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-count {
	width: 600rpx;
}
.grace-shoppingcard-checkout {
	width: 280rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	text-align: center;
	flex-shrink: 0;
}

.login-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border: 2rpx solid rgba(181, 181, 181, 0);
	color: #ffffff;
	background: #eb5d4b;
	font-size: 28rpx;
	border-radius: 0;
}
</style>
